<mat-toolbar class="mat-elevation-z5">
  <img [src]="isLightMode() ? './assets/images/logo.svg' : './assets/images/logo-white.svg'" id="logo">
  <h1 class="app-header">Dashboard</h1>

  <span class="spacer"></span>

  <div *ngIf="globals.changesEnabledRoutes.includes(router.url)">
    <mat-form-field id="scopeFormField">
      <mat-select (selectionChange)="onScopeChange()" [(ngModel)]="scopeValue" name="scope" placeholder="Scope">
        <mat-option *ngFor="let scope of scopes" [value]="scope">
          {{ scope }}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</mat-toolbar>

<mat-sidenav-container>
  <mat-sidenav #drawer mode="side" [ngClass]="isMenuOpen ? 'menu-open' : 'menu-close'" opened>
    <mat-nav-list>
      <a mat-list-item (click)="onDrawerToggle()">
        <mat-icon matListIcon>{{ isMenuOpen? 'chevron_left' : 'chevron_right' }}</mat-icon>
        <span mat-line></span>
      </a>
      <ng-container *ngFor="let component of menu">
        <mat-divider></mat-divider>
        <a mat-list-item [routerLink]="component.link" routerLinkActive="active">
          <mat-icon matListIcon>{{ component.icon }}</mat-icon>
          <span mat-line>{{ component.title }}</span>
        </a>
      </ng-container>

      <span class="spacer"></span>

      <a mat-list-item (click)="openDialog()">
        <mat-icon matListIcon>info</mat-icon>
        <span mat-line>About</span>
      </a>

      <ng-container *ngIf="globals.changesEnabledRoutes.includes(router.url)" >
        <mat-divider></mat-divider>
        <a mat-list-item (click)="onThemeChange()">
          <mat-icon matListIcon>{{ isLightMode() ? 'nights_stay' : 'wb_sunny' }}</mat-icon>
          <span mat-line>{{ isLightMode() ? 'Dark Theme' : 'Light Theme' }}</span>
        </a>
      </ng-container>
      
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>

</mat-sidenav-container>
